import { useState, useRef, createContext, useContext } from 'react';

const dataContext = createContext()


function Son(props) {
  console.log(11, props);
  return (
    <div>
      son
      <hr />

      <Grandson />
    </div>
  )
}

function Grandson() {
  // const data = useContext(dataContext)
  // console.log(233, data);

  const { name, age } = useContext(dataContext)

  return (
    <div>
      Grandson: {name}-{age}
    </div>
  )
}


export default function App() {
  const data = {
    name: 'JACK',
    age: 12
  }
  return (
    <div>
      <h1>15 跨层组件通信</h1>
      <hr />

      <dataContext.Provider value={data} >
        <Son />
      </dataContext.Provider>

    </div >
  )
}